<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/lx/admin/components/meta.html" />
    <title>报名名单 ${metaTitleSuffix!}</title>
    <#include "/lx/admin/components/stylesheets.html" />
</head>

<body>
    <div id="app">
        <el-container>
            <#assign menuIndex="1-1" />
            <#include "/lx/admin/components/menu.html" />
            <el-container>
                <#include "/lx/admin/components/header.html" />
                <el-main>
                    <template>
                        <el-row>
                            <el-col :span="12">
                                <div class="title theme-color1">报名名单 - {{ activity.title }}</div>
                            </el-col>
                            <el-col :span="12">
                                <div class="operations">
                                    <!-- <el-button type="success" size="small" @click="add"><i class="el-icon-plus"></i>添加</el-button> -->
                                    <!-- <el-button type="success" size="small" @click="exportExcel"><i class="el-icon-download"></i>导出当前页</el-button> -->
                                    <el-button type="success" size="small" @click="exportExcel2"><i class="el-icon-download"></i>导出</el-button>
                                </div>
                            </el-col>
                        </el-row>
                        <div class="search">
                            <el-cascader :options="city" change-on-select filterable='true' clearable='true' v-model="search.location"></el-cascader>
                            <el-select v-model="search.companyId" clearable placeholder="请选择公司">
                                <el-option v-for="(item, index) in companyArray" :label="item.name" :value="item.id"></el-option>
                            </el-select>
                            <el-button @click="onSearch"><i class="el-icon-search"></i>筛选</el-button>
                            <el-checkbox v-model="displayAttend" @change="onSearch" v-if="activity.type == 2" style="margin-left: 10px;">只显示实际参与用户</el-checkbox>
                        </div>
                        <el-table id="dataTable" ref="multipleTable" :data="list" tooltip-effect="dark" :stripe='true' style="width: 100%">
                            <el-table-column prop="name" label="姓名">
                            </el-table-column>
                            <el-table-column prop="mobile" label="手机号">
                            </el-table-column>
                            <el-table-column prop="email" label="邮箱">
                            </el-table-column>
                            <el-table-column prop="birth" label="生日">
                            </el-table-column>
                            <el-table-column prop="province" label="省份">
                            </el-table-column>
                            <el-table-column prop="city" label="城市">
                            </el-table-column>
                            <el-table-column prop="companyName" label="公司">
                            </el-table-column>
                            <el-table-column prop="job" label="职务">
                            </el-table-column>
                            <el-table-column prop="channel" label="如何了解到本次活动">
                            </el-table-column>
                            <el-table-column prop="prevSubmit" label="上申请季学生递交数" sortable>
                            </el-table-column>
                            <el-table-column prop="prevAdopt" label="上申请季学生入读数" sortable>
                            </el-table-column>
                            <el-table-column prop="question" label="问题" show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column prop="attend" label="是否参与活动">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.attend == 1">是</span>
                                    <span v-else>否</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="120" :class-name="optionHidden ? 'hidden' : ''">
                                <template slot-scope="scope">
                                    <el-button @click="view(scope.row)" type="text" size="small">查看详情</el-button>
                                    <el-button @click="del(scope.row)" type="text" size="small" style="color: red;">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <#include "/lx/admin/components/page.html" />
                    </template>
                </el-main>
            </el-container>
        </el-container>
        <#include "/lx/admin/components/footer.html" />
    </div>
    <#include "/lx/admin/components/scripts.html" />
    <script src="https://cdn.bootcss.com/xlsx/0.14.0/xlsx.full.min.js"></script>
    <script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
    <script src="/lx/activity/assets/json/city.json"></script>
    <script>
        var vue = new Vue({
        el: '#app',
        data() {
            return {
                list: [],
                activity: {},
                optionHidden: false,
                city: city,
                companyArray: [],
                search: {
                    location: '',
                    companyId: ''
                },
                displayAttend: false
            }
        },
        mounted: function() {
            this.list = ${items!'[]'}
            this.activity = ${activity!'{}'}
            this.companyArray = ${companies!'[]'}

            var searchProvince = '${province!}';
            var searchCity = '${city!}';
            if (searchProvince != '') {
                this.search.location = new Array;
                this.search.location.push(searchProvince);

                if (searchCity != '') {
                    this.search.location.push(searchCity);
                }
            }
            var searchCompanyId = '${companyId!}';
            if (searchCompanyId != '') {
                this.search.companyId = Number(searchCompanyId);
            }
            var attendStr = '${attend!}';
            if (attendStr) {
                this.displayAttend = true;
            }
        },
        methods: {
            // add() {
            //     window.location.href = "/lx/admin/activity/info";
            // },
            view(item) {
                window.location.href = "/lx/admin/activity/enrollInfo?userId=" + item.userId + "&activityId=" + item.activityId;
            },
            del(item) {
                var self = this;
                confirm("确认删除？请谨慎操作", "确认", function() {
                    var url = "/lx/admin/activity/deleteEnroll"
                    var param = {
                        activityId: item.activityId,
                        userId: item.userId
                    };
                    var success = (response) => {
                        window.location.href = "/lx/admin/activity/enrollList?activityId=" + self.activity.id;
                    }
                    var fail = (response) => {
                        msg(response.data.msg);
                    }
                    var complete = () => {}
                    axiosRequestPro(url, param, success, fail, complete);
                })
            },
            onSearch() {
                var self = this;
                var keys = [
                    { key: 'companyId', value: self.search.companyId },
                    { key: 'attend', value: self.displayAttend }
                ]
                if (self.search.location && self.search.location.length == 1) {
                    keys.push({ key: 'province', value: self.search.location[0] });
                    keys.push({ key: 'city', value: '' });
                } else if (self.search.location.length > 1) {
                    keys.push({ key: 'province', value: self.search.location[0] });
                    keys.push({ key: 'city', value: self.search.location[1] });
                } else {
                    keys.push({ key: 'province', value: '' });
                    keys.push({ key: 'city', value: '' });
                }
                goPage(1, keys);
            },
            exportExcel() {
                var self = this;
                self.optionHidden = true;
                setTimeout(function() {
                    /* generate workbook object from table */
                    var elt = document.getElementById('dataTable');
                    var wb = XLSX.utils.table_to_book(elt, { display: true })

                    // this.fixedColumn = 'right'
                    /* get binary string as output */
                    var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: false, type: 'array' })

                    try {
                        saveAs(new Blob([wbout], { type: 'application/octet-stream' }), self.activity.title + '_报名名单.xlsx')
                        self.optionHidden = false;
                    } catch (e) {
                        if (typeof console !== 'undefined') console.log(e, wbout)
                    }
                }, 1000)
                return

                return wbout
            },
            exportExcel2() {
                goDownload();
            },
            onPageChange(val) {
                // console.log('当前页: {val}' + val);
                goPage(val)
            }
        }
    })
    </script>
    <#include "/lx/admin/components/msg.html" />
    <style type="text/css">
    .title {
        font-size: 18px;
        font-weight: bold;
    }

    .operations {
        text-align: right;
    }

    .hidden {
        display: none;
    }
    </style>
</body>

</html>